<script setup lang="ts">
import { watchEffect } from 'vue'
import { ref } from 'vue'
import { RouterView, useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const active = ref(route.name as string) //类型断言

watchEffect(() => {
  router.push({
    name: active.value
  })
})
</script>

<template>
  <RouterView />
  <VanTabbar v-model="active">
    <VanTabbarItem name="home" icon="home-o">首页</VanTabbarItem>
    <VanTabbarItem name="order" icon="bars">订单</VanTabbarItem>
    <VanTabbarItem name="me" icon="contact">我的</VanTabbarItem>
  </VanTabbar>
</template>

<style lang="scss" scoped>
.center {
  text-align: center;
}
</style>
